<template>
    <div class="container">
        <div class="page-head" :class="{'page-head-fixed': tabsRow}">
            <img v-if="fileSpace" class="width-16 height-16" :src="fileSpace + '/images/add-tag.png'"/>
            <div class="mar-l-8" @click="showAddCustomerDialog = true">添加顾客</div>
        </div>
        <div :class="{'height-50': tabsRow}"></div>
        <div class="small-title">
            <div>标签名字</div>
        </div>
        <div class="tags-name" @click="showPopup = true">
            <div>{{labelName}}</div>
        </div>
        <div class="small-title flex flex-between">
            <div><span>标签成员</span><span class="mar-l-9">({{tagsTotal}})</span></div>
            <div><span>消费总额：</span><span class="consumption">￥{{totalPrice}}</span></div>
        </div>
        <div class="pull-refresh">
            <div class="content-list" v-if="!dataNone">
                <div v-for="(item,index) in listData" :key="index">
                    <van-swipe-cell id="swipe-cell" :right-width="80" @close="onClose(item,$event)" async-close @click="goDetails(item)">
                        <div class="self-cell">
                            <img v-if="item.avatar" :src="item.avatar"/>
                            <div class="nickname">{{item.nickname}}</div>
                        </div>
                        <div slot="right">删除</div>
                    </van-swipe-cell>
                </div>
                <base-line v-if="pullLoad.finished"  title='我是有底线滴'></base-line>
            </div>
            <div class="pad-10 mar-t-10 align-c" v-else>
                <img v-if="fileSpace" mode="widthFix" class="width-247.5 height-193.5 mar-t-30"
                    :src="fileSpace + '/images/customer-nodata.png'"/>
                <div class="pad-t-22 font-18 font-gray">暂无顾客数据~</div>
                <div class="mar-t-20 perfect-shop">
                  <button @click="showAddCustomerDialog = true">立即添加</button>
                </div>
            </div>
        </div>
        <!-- <div style="height:500px;"></div> -->
        <div class="show-dialog dialog-h">
            <van-dialog
                use-slot
                :show="showAddCustomerDialog"
                :showConfirmButton="false"
                @close="onCloseAddCustomerDialog"
            >
                <div class="close-btn">
                    <van-icon name="cross" size="14px" color="#999999" @click="showAddCustomerDialog = false" />
                </div>
                <div class="jump-cell mar-t-7" @click="goCustom">
                    <div class="left">
                        <img v-if="fileSpace" class="width-50 height-50" :src="fileSpace + '/images/customize-group.png'" />
                        <div class="mar-l-20">
                            <div class="font-15 font-color font-w">自定义添加</div>
                            <div class="font-11 color-9 mar-t-7">自主添加和删除标签组的顾客</div>
                        </div>
                    </div>
                    <div>
                        <van-icon name="arrow" size="22px" color="#999999" />
                    </div>
                </div>
                <div class="jump-cell mar-t-23" @click="goIntelligence">
                    <div class="left">
                        <img v-if="fileSpace" class="width-50 height-50" :src="fileSpace + '/images/intelligent-group.png'" />
                        <div class="mar-l-20">
                            <div class="font-15 font-color font-w">智能添加</div>
                            <div class="font-11 color-9 mar-t-7">通过指定条件添加顾客到分组</div>
                        </div>
                    </div>
                    <div>
                        <van-icon name="arrow" size="22px" color="#999999" />
                    </div>
                </div>
            </van-dialog>
        </div>
        <div class="show-dialog">
            <van-dialog
                use-slot
                title="编辑标签"
                :show="showDialog"
                show-cancel-button
                confirmButtonText="确定保存"
                @close="onCloseDialog"
                @confirm="onConfirmDialog"
            >
                <input type="text" placeholder="标签名称" v-model="editTagName">
            </van-dialog>
        </div>
        <div class="show-delete-dialog show-dialog">
            <van-dialog
                use-slot
                title="是否确认删除该分组?"
                :show="showDeleteDialog"
                show-cancel-button
                confirmButtonText="确认删除"
                @close="onCloseDeleteDialog"
                @confirm="onConfirmDeleteDialog"
            >
            </van-dialog>
        </div>
        <div class="popup-class">
            <van-popup
                :show="showPopup"
                custom-style="background:#e6e6e6;border-radius:10px 10px 0 0;"
                position="bottom" >
                <div class="popup-row edit" @click="editBtnClick">编辑名称</div>
                <div class="popup-row delete" @click="deleteClick">删除</div>
                <div class="popup-row cancel" @click="showPopup = false">取消</div>
            </van-popup>
        </div>
    </div>    
</template>
<script>
import { pagingCustomer, veekrayLabelGroupSave, countActualPrice, deleteByMemberId, groupDelete } from '@/api/personal'
import baseLine from '@/components/BaseLine/index'
export default {
  components: { baseLine },
  data() {
    return {
      dataNone: false,
      tabsRow: false,
      showDialog: false,
      showDeleteDialog: false,
      showPopup: false,
      showAddCustomerDialog: false,
      editTagName: '',
      listData: [],
      labelGroupId: null,
      totalPrice: '0.00',
      labelName: '',
      tagsTotal: 0,
      listQuery: {
        memberId: '',
        currentPage: 1,
        size: 10
      },
      pullLoad: {
        loading: false,
        finished: false
      }
    }
  },
  onLoad() {
    // 重置缓存data里面的数据
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    this.listQuery.currentPage = 1
    this.listData = []
    this.editTagName = ''
    this.labelName = this.getCurrentPage().query.labelName
    this.labelGroupId = this.getCurrentPage().query.labelGroupId
    this.pageInit()
    this.getTotalNumber()
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.pageInit()
    }
  },
  onPageScroll: function(e) {
    const query = this.$pt.createSelectorQuery()
    query.select('.small-title').boundingClientRect()
    // query.selectViewport().scrollOffset()
    query.exec(res => {
      if (res[0].top <= -10) {
        this.tabsRow = true
      } else {
        this.tabsRow = false
      }
    })
  },
  methods: {
    pageInit() {
      let params = {
        labelGroupId: this.labelGroupId
      }
      pagingCustomer(params).then(response => {
        this.dataNone = false
        if (response.isError) return
        response.data.records.forEach(element => {
          this.listData.push(element)
        })
        this.tagsTotal = response.data.total
        this.listQuery.currentPage++
        if (this.listData.length === 0 || this.listData.length >= response.data.total) {
          this.pullLoad.finished = true
        }
        if (response.data.records.length === 0) {
          this.dataNone = true
        }
      }).catch({})
    },
    getTotalNumber() {
      countActualPrice({labelGroupId: this.labelGroupId}).then(response => {
        if (response.isError) return
        this.totalPrice = response.data
      })
    },
    goCustom() {
      // 前往自定义添加顾客
      this.showAddCustomerDialog = false
      this.$pt.navigateTo({url: '/pages/home/customer-manage/tags-manage/custom-add/main?labelGroupId=' + this.labelGroupId + '&labelName=' + this.labelName})
    },
    goIntelligence() {
      // 前往智能添加顾客
      this.showAddCustomerDialog = false
      this.$pt.navigateTo({url: '/pages/home/customer-manage/tags-manage/intelligence-add/main?labelGroupId=' + this.labelGroupId})
    },
    editBtnClick() {
      this.showPopup = false
      this.showDialog = true
    },
    goDetails(item) {
      // 前往顾客详情页
      this.$pt.navigateTo({url: '/pages/home/customer-manage/detail/main?id=' + item.memberId + '&name=' + item.nickname})
    },
    onClose(value, event) {
      const { position, instance } = event.mp.detail
      switch (position) {
        case 'cell':
          instance.close()
          break
        case 'right':
          instance.close()
          let params = {
            memberId: value.memberId,
            labelGroupId: value.labelGroupId
          }
          deleteByMemberId(params).then(response => {
            if (response.isError) return
            this.$utils.showToast({ title: response.msg })
            // let resultIndex = this.listData.filter((item, index) => {
            //   if (item.memberId === value.memberId) {
            //     return index
            //   }
            // })
            // this.listData.splice(resultIndex, 1)
            this.listQuery.currentPage = 1
            this.listData = []
            this.pageInit()
            this.getTotalNumber()
          }).catch({})
          break
      }
    },
    onConfirmDialog() {
      // 保存标签修改事件
      let params = {
        labelGroupId: this.labelGroupId,
        labelName: this.editTagName,
        memberId: this.getCustomerId
      }
      veekrayLabelGroupSave(params).then(response => {
        if (response.isError) return
        this.$utils.showToast({ title: response.msg })
        this.labelName = this.editTagName
      }).catch({})
    },
    onCloseDialog() {
      this.showDialog = false
    },
    onCloseDeleteDialog() {
      this.showDeleteDialog = false
    },
    onCloseAddCustomerDialog() {
      this.showAddCustomerDialog = false
    },
    deleteClick() {
      this.showPopup = false
      this.showDeleteDialog = true
    },
    onConfirmDeleteDialog() {
      groupDelete({labelGroupId: this.labelGroupId}).then(response => {
        if (response.isError) return
        this.$utils.showToast({ title: response.msg })
        // this.$pt.redirectTo({url: '/pages/home/customer-manage/tags-manage/main'})
        setTimeout(() => {
          this.$pt.navigateBack({
            delta: 1
          })
        }, 1500)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.container{
  background: white;
  min-height: calc(100vh);
}
.page-head{
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 0 15px;
    height: 49px;
    width: calc(100% - 30px);
    border-bottom: 1px solid #ededed;
    color: #ec6700;
    font-size: 15px;
    background: white;
    z-index: 99;
}
.page-head-fixed{
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0px 2px 6px #c5c5c5;
}
.popup-class{
    .popup-row{
        background: white;
        height: 47.5px;
        line-height: 47.5px;
        text-align: center;
        font-size: 19px;
        font-weight: bold;
        color: #121212;
    }
    .edit{
        border-bottom: 1px solid #d6d6d6;
    }
    .delete{
        color: #ff2828;
    }
    .cancel{
        margin-top: 10px;
        border-top: 1px solid #c1c1c1;
    }
}

.small-title{
    padding: 0 15px;
    background: #ededed;
    font-size: 12px;
    color: #666666;
    height: 35px;
    line-height: 35px;
    .consumption{
        color: #fd452d;
    }
}
.tags-name{
    padding: 0 15px;
    font-size: 15px;
    color: #333333;
    height: 40px;
    line-height: 40px;
}
.content-list{
    /deep/ .van-swipe-cell__right{
        line-height: 50px;
        background: red;
        height: 50px;
        top: -5px;
        color: white;
        width: 100%;
        padding-left: 25px;
    }
    .self-cell{
        padding-left: 15px;
        margin-top: 5px;
        height: 45px;
        display: flex;
        justify-content: left;
        align-items: center;
        img{
            width: 35px;
            height: 35px;
            border-radius: 50%;
            margin-right: 12px;
        }
        .nickname{
            font-size: 15px;
            color: #333333;
            width: calc(100% - 47px);
            height: 44px;
            line-height: 44px;
            border-bottom: 1px solid #ededed;
        }
    }
    .customer-avatar{
        line-height: 50px;
        width: 35px;
        height: 35px;
        border-radius: 50%;
    }
}
.close-btn{
    text-align: right;
    padding-right: 15px;
    padding-top: 10px;
}
.jump-cell{
    margin-left: 15px;
    margin-right: 15px;
    border: 0.5px solid #999999;
    border-radius: 5px;
    height: 64px;
    padding: 0 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left{
        display: flex;
        justify-content: left;
        align-items: center;
        line-height: 1;
    }
}
.show-delete-dialog{
  /deep/ .van-dialog__header{
    padding-bottom: 25px;
  }
}
</style>
